<template>
    <div class="aff-title">
        <p>公告标题:</p>
        <input type="text">
        <!-- 按钮 -->
        <el-row class="mb-4">
            <el-button type="primary" class="el-button">查询</el-button>
            <el-button>重置</el-button>
        </el-row>
    </div>
    <el-button type="primary" class="box">+添加公告分类</el-button>
    <!-- 表单 -->
    <el-table :data="tableData" style="width: 100%" class="el-table">
            <el-table-column prop="date" label="ID" width="50" />
            <el-table-column prop="name" label="排序" width="100" />
            <el-table-column prop="data" label="公告类别" width="180" />
            <el-table-column prop="address" label="公告标题" width="315"/>
            <el-table-column prop="founder" label="创建人" width="100"/>
            <el-table-column prop="period" label="公告展示期间" width="215"/>
            <el-table-column prop="state" label="状态" />
        </el-table>
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" :total="1000"/>
</template>

<script setup lang="ts">
const tableData = [
  {
    date: '1',
    name: '0',
    data:'普通公告',
    address: '关于2023年春节假期安排的公告',
    founder:'张小华',
    period:'2022-12-19~2023-03-01',
    state:'禁用'
  },
  {
    date: '2',
    name: '1',
    data:'紧急公告',
    address: '明天上午11:00政府消防部门到场检查',
    founder:'张小华',
    period:'2022-12-19~2023-03-01',
    state:'正常'
  },
  {
    date: '2',
    name: '1',
    data:'紧急公告',
    address: '明天上午11:00政府消防部门到场检查',
    founder:'张小华',
    period:'2022-12-19~2023-03-01',
    state:'正常'
  },
  {
    date: '2',
    name: '1',
    data:'紧急公告',
    address: '明天上午11:00政府消防部门到场检查',
    founder:'张小华',
    period:'2022-12-19~2023-03-01',
    state:'正常'
  },
]
</script>

<style scoped lang="scss">
.aff-title{
    display: flex;
    input{
        margin-left: 15px;
        margin-bottom:55px;
        margin-top: 16px;
    }
    .el-button{
        margin-left: 10px;
        margin-top: 12px;
    }
}
.box{
    margin: 10px 0;
}

</style>